<template lang="html">
<div class="section-page renovationhome-page" v-loading="loading">
    <choose-link ref="chooseLink" :config="chooseLinkConfig" :changeEvt="uploadFileChange"></choose-link>
    <choose-files ref="chooseFiles" :config="chooseFilesConfig" :changeEvt="uploadFileChange"></choose-files>
    <choose-goods ref="chooseGoods" :config="chooseGoodsConfig" :changeEvt="uploadFileChange"></choose-goods>
    <div class="page-content">
        <div class="page-body pad-no">
            <section class="page-box">
                <div class="welcome-container">
                    <div class="renovation-content">
                        <el-row class="tac renohome-left">
                          <!-- 左 -->
                            <el-col>
                                <el-menu default-active="1" :default-openeds="openeds" class="el-menu-vertical-demo">
                                   <!-- <div style="padding:20px 20px 10px 10px;"> <div style="color:#333;font-size: 14px;font-weight: 600;margin:0px 0px 5px 5px;">组件名称：</div><el-input placeholder="请输入表单名称" v-model="textname" ></el-input></div> -->
                                    <el-submenu index="1">
                                        <i slot="title">
                                        <span>基础组件</span>
                                        </i>
                                        <el-menu-item-group>
                                            <el-menu-item v-for="(item, index) in redata1" :key="item.key" @click="leftclick(index,1,item.key)" :index="`1-${index}`"
                                              v-if="((item.key==='seckill' && patSetting.plugin.spike.open) ||
                                              (item.key==='makegroup' && patSetting.plugin.groups.open) ||
                                              (item.key === 'bargaining' && patSetting.plugin.bargain.open) ||
                                               !(['seckill','makegroup','bargaining'].includes(item.key)))"
                                            >
                                                  <div class="flex-col flex-justify-c flex-align-c">
                                                    <svg-icon :icon-class="item.icon" />
                                                    <p class="renohome-left-text">{{item.name}}</p>
                                                </div>

                                            </el-menu-item>
                                        </el-menu-item-group>
                                    </el-submenu>

                                </el-menu>
                            </el-col>
                        </el-row>
                        <!-- 中 -->
                        <div class="flex-row flex-justify-c">
                            <section ref="renohome" class="renohome-content">
                                <div class="renohome-phone">
                                    <div class="renohome-phone-inner" style="background:#f8f8f8">
                                          <!-- <img
                                              :src=" require('@/assets/image/queren.png')"
                                              style="width:100%;"
                                              v-if="this.$route.query.theme_festival_id==2"
                                            /> -->
                                        <vuedraggable class="wrapper" v-model="custormList" draggable=".item" style="width:373px;padding:10px;">
                                            <transition-group>
                                                <div ref="showitem" :id="showitem.id" :class="{'item': !noFiltersLits.includes(showitem.key)}" v-for="(showitem, showindex) in custormList" :key="showitem.id" style="background:#fff">
                                                    <component :id="showitem.id" :is="`${showitem.key}Show`" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"/>
                                                </div>
                                            </transition-group>
                                        </vuedraggable>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <!-- 右 -->
                        <div class="renohome-right">
                            <div v-for="(item, index) in custormList" :data-key="index" :key="index">
                                <component :ref="`${item.key}_edit`" :is="custormCurrent == index && item.key == custormList[custormCurrent]['key'] ? `${item.key}Edit`: ''" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"/>

                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div>
    </div>
</div>
</template>

<script>
import vuedraggable from 'vuedraggable'
import themeData from '@/utils/themestyleData'
import ChooseLink from '@/components/ChooseLink/index'
import ChooseFiles from '@/components/ChooseFiles/index'
import ChooseGoods from '@/components/ChooseGoods/index'
import power from '@/mixins/power'
import advertisementEdit from '@/components/themeStyle/advertisement_edit'
import advertisementShow from '@/components/themeStyle/advertisement_show'
import sellerspecialEdit from '@/components/themeStyle/sellerspecial_edit'
import sellerspecialShow from '@/components/themeStyle/sellerspecial_show'
import seckillEdit from '@/components/themeStyle/seckill_edit'
import seckillShow from '@/components/themeStyle/seckill_show'
import makegroupShow from '@/components/themeStyle/makegroup_show'
import makegroupEdit from '@/components/themeStyle/makegroup_edit'
import bargainingShow from '@/components/themeStyle/bargaining_show'
import bargainingEdit from '@/components/themeStyle/bargaining_edit'
import graphicfloatbtnShow from '@/components/themeStyle/graphicfloatbtn_show'
import graphicfloatbtnEdit from '@/components/themeStyle/graphicfloatbtn_edit'

import themeStyle from '@/views/application/mixins/themeStyle'
import {getThemeFestivalPage} from '@/api/application'
// import custormBase from '@/views/application/mixins/custormBase'
export default {
  name: 'Mgroup',
  mixins: [power, themeStyle],
  watch: {
    'custormList': {
      handler(newData, oldData) {
        this.$store.commit('SET_THEME_FESTIVAL_ID', this.$custormList)
      },
      immediate: true,
      deep: true
    },
    // 'textname': {
    //   handler(newData, oldData) {
    //     this.$store.commit('SET_TEXTNAME', this.textname)
    //     console.log('99999999999999999999ssssssssssss', this.textname)
    //   },
    //   immediate: true,
    //   deep: true
    // },
  },
  components:{
    vuedraggable,
    ChooseLink,
    ChooseFiles,
    ChooseGoods,
    advertisementEdit,
    advertisementShow,
    sellerspecialEdit,
    sellerspecialShow,
    seckillEdit,
    seckillShow,
    makegroupShow,
    makegroupEdit,
    bargainingShow,
    bargainingEdit,
    graphicfloatbtnShow,
    graphicfloatbtnEdit
  },
  data() {
    return {
      editId: false,
      noFiltersLits: [-2, 'graphicfindfix', 'graphicfloatbtn'],
      openeds: ['1', '2', '3', '4'],
      frequency: 50,
      scrollscale: 2,
      custormInitData: themeData.data,
      iscustormDataCopy: false,
      type: '',
      redata1: [
        {
          icon: 'danchuangguanggao',
          name: '广告位',
          key: 'advertisement',
          nownum: 0
        },
        {
          icon: 'remai',
          name: '热卖专区',
          key: 'sellerspecial',
          nownum: 0
        },
        {
          icon: 'miaosha',
          name: '秒杀专区',
          key: 'seckill',
          nownum: 0
        },
        {
          icon: 'pintuan',
          name: '拼团专区',
          key: 'makegroup',
          nownum: 0
        },
        {
          icon: 'bargain',
          name: '砍价专区',
          key: 'bargaining',
          nownum: 0
        },
        {
          icon: 'floatbtn',
          name: '浮动按钮',
          key: 'graphicfloatbtn',
          nownum: 0,
          allnum: 1
        }
      ]

    }
  },
  directives: {
    // domscroll
  },
  computed: {
    // setTop() {
    //   return !this.$store.getters.setDiyTop
    // },
    $custormList() {
      return this.$edit ? [{ theme_festival_id: this.$route.query.theme_festival_id,festival_page_id:this.$route.query.festival_page_id, value: [...this.custormList] }] : [{ theme_festival_id: this.$route.query.theme_festival_id,festival_page_id:this.$route.query.festival_page_id, value: [...this.custormList] }]
    },
  },
 
  created() {
    this.$nextTick(() => {
      const festival_page_id = this.$route.query.festival_page_id
      if (festival_page_id!='') {
        getThemeFestivalPage({ festival_page_id: festival_page_id }).then(res => {
          this.custormList = res.data.data.data
        })
      }
    
    })
  },
  mounted() {

  },
  methods: {
    leftclick(index, e, key) {
      console.log('ddddddddddddd', index, e, key)
      const allnum = this[`redata${e}`][index].allnum
      const num = this.custormList.filter(custormItem => {
        const { key: keyNow } = custormItem
        return keyNow === key
      })
      // 组件没有个数限制
      if (allnum > num.length || !allnum) {
        if (key === 'otheradvert') {
          // 显示出广告弹窗
          this.$refs.otheradvert_edit.toggle()
        } else {
          if (this.custormCurrent === -2) {
            this.custormCurrent = -1
          }
          // debugger
          const spliceIndex = key === 'graphicfindfix' ? 0 : this.custormCurrent + 1
          // this[`redata${e}`][index].nownum = num + 1
          this.custormList.splice(spliceIndex, 0, Object.assign({}, this.filterCustorm(key)))
          this.$nextTick(() => {
            this.custormCurrent = spliceIndex
            // this.checkCopy()
            // console.log(this.custormCurrent);
          })
        }
      } else {
        this.$message({
          type: 'error',
          message: `此类型组件最多添加${allnum}个~!`
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$renohome-top: 50px;

.secation {
  background: #ffffff;
  padding: 0.2rem;
  border: 1px dashed orange;
  margin: 20px 0;
}

.project-type {
  width: 245px;
}

.page-body {
  border: 0;
}

.welcome-container .account-stat {
  margin-bottom: 20px;
}

.section-page.renovationhome-page {
  /deep/ .el-radio+.el-radio{
    margin-left: 20px;
  }
  /deep/ .renohome-phone-btn .el-button {
    font-size: 16px;
    background: #73767d !important;
    padding: 11px 7px;
    border: none;
    color: #fff;
  }

  /deep/ .renohome-content {
    left: 305px !important;
  }

  /deep/ .renohome-content .renohome-phone .drag.active:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed #409eff;
    cursor: move;
    z-index: 10;
  }

  /deep/ .renohome-content .renohome-phone .drag:hover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed #409eff;
    cursor: move;
    z-index: 10;
    
  }

  /deep/ .renohome-content .renohome-phone .noshow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    // background-color: rgba(0, 0, 0, 0.2);
    background-size: 80px 25px;
    background-position: 50%;
    background-repeat: no-repeat;
    z-index: 3;
  }
  /deep/ .custorm-help{
    margin-top:12px;
    color:#999999;
  }
  /deep/ .custorm--modelbox {
    position: relative;
  }

  /deep/ .custorm--modelbox .btn-edit-del {
    display: none;
    height: 16px;
    width: 16px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    background: #409eff;
    border-radius: 0 0 0 100%;
  }

  /deep/ .renohome-content .renohome-phone .drag:hover .btn-edit-del,
  /deep/ .renohome-content .renohome-phone .drag.active .btn-edit-del {
    display: block;
  }

  /deep/ .btn-edit-del .icon-close {
    font-size: 16px;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    text-align: right;
    line-height: 1;
  }

  /deep/ .btn-edit-del .icon-close::after {
    content: "×";
  }

  /deep/ .es-goods-group:after {
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    content: "";
    clear: both;
  }

  /deep/ .block {
    display: block !important;
  }

  /deep/ .el-submenu__title {
    font-style: normal;
  }

  & .welcome-container .panel-body {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 20px;
    padding-left: 116px;

    & .table-footer {
      background: #ffffff;
    }
  }

  & /deep/ .el-menu-item.is-active {
    color: #303133;
  }

  & /deep/ .el-form-item__label {
    white-space: nowrap;
  }

  & .renohome-icon {
    height: 20px;
    width: 20px;
  }

  & .el-menu-item:hover {
    background-color: transparent;
  }

  & .el-menu-item:hover::after {
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid #409eff;
    position: absolute;
    top: 0;
    left: 0;
  }

  & .el-menu-item:hover p {
    background-color: transparent;
  }

  & .el-menu-item:focus {
    background-color: transparent;
    color: #303133;
  }

  & .renohome-left-text {
    height: 21px;
    line-height: 21px;
    font-size: 14px;
    text-align: center;
    margin-top: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & .renohome-left-num {
    line-height: 15px;
    color: rgb(153, 153, 153);
    font-size: 12px;
  }

  & /deep/ .el-menu-item-group__title {
    display: none;
  }

  /deep/ .el-submenu__title {
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    font-weight: 600;
    padding: 0 15px;
    background-color: #f3f3f3;

    i {
      color: #333;
      margin-right: 0;
    }

    i > span {
      display: inline-block;
      font-style: normal;
    }
  }

  /deep/ .el-submenu.is-opened:nth-of-type(1) .el-submenu__title {
    border-top: none;
  }

  & /deep/ .el-menu-vertical-demo {
    // border: 1px solid #e6e6e6;
  }

  & .renohome-right {
    width: 360px;
    overflow-y: scroll;
    position: fixed;
    top: $renohome-top;
    bottom: 0;
    right: 0;
    background: #fff;
    border-radius: 4px;
    padding: 0 10px;
  }

  & .renohome-left {
    width: 305px;
    overflow-y: scroll;
    position: fixed;
    top: $renohome-top;
    bottom: 0;
    left: 211px;
    background: #fff;

    /deep/ .el-menu-item-group > ul {
      flex-wrap: wrap;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;

      li {
        width: 33.33%;
        height: auto;
        line-height: auto;
        min-width: auto;
        padding: 15px 0 !important;
        &:not(:nth-child(3n+0)) {
          border-right: 1px solid #f3f3f3;
        }
        border-bottom: 1px solid #f3f3f3;
        position: relative;
      }

      .svg-icon {
        width: 23px;
        height: 26px;
        padding-top: 3px;
        opacity: 0.7;
      }
    }
  }

  & /deep/ .renohome-phone {
    width: 375px;
    background: #fafafa;
    margin: 50px auto 0;
    position: relative;
    box-sizing: border-box;
  }

  & /deep/ .renohome-phone-inner {
    border: 1px solid #ddd;
    background: #fff;
    min-height: 760px;
  }

  & /deep/ .renohome-content {
    background: #f2f4f7;
    position: fixed;
    overflow-y: scroll;
    left: 479.5px;
    right: 360px;
    top: $renohome-top;
    bottom: 0;
    padding-bottom: 50px;
  }

  & /deep/ .renohome-phone-btn {
    position: fixed;
    width: 40px;
    height: auto;
    background: #535167;
    left: 49%;
    top: 40%;
    margin-left: 210px;
    border-radius: 20px;
    text-align: center;
    z-index: 2;
    overflow: hidden;
  }

  & /deep/ .renohome-phone-btn .el-button + .el-button {
    margin-left: 0;
  }

  & /deep/ .renohome-phone-btn .el-button {
    background: #535167 !important;
    padding: 11px 7px;
    border: none;
    color: #fff;
    position: relative;
  }

  & /deep/ .renohome-phone-btn .el-button::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 0;
    border-top: 1px solid #626077;
    bottom: 0;
    left: 10px;
  }

  & /deep/ ::-webkit-scrollbar {
    width: 4px;
    background-color: #f5f5f5;
    height: 6px;
  }

  & /deep/ ::-webkit-scrollbar-thumb {
    background-color: #999;
  }

  & /deep/ ::-webkit-scrollbar-track {
    background-color: #f2f4f7;
  }

  & /deep/ .renohome-content::-webkit-scrollbar-track {
    background: #f2f4f7;
  }

  & /deep/ .renohome-right-nav {
    width: 100%;
    position: relative;
    padding: 10px 0;
  }

  & /deep/ .renohome-right-nav-title {
    color: #409eff;
    font-size: 15px;
    text-align: left;
    padding-left: 15px;
    position: relative;
    height: 28px;
    line-height: 28px;
  }

  & /deep/ .renohome-right-nav-title::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    bottom: 5px;
    width: 3px;
    background: #409eff;
    border-radius: 30%;
  }

  & /deep/ .renohome-right-nav-list {
    height: 28px;
    line-height: 28px;
    background-color: #f2f2f3;
    border-radius: 14px;
    width: 180px;
  }

  & /deep/ .renohome-right-nav-itembox {
    background: rgb(242, 242, 242);
  }

  & /deep/ .renohome-right-nav-item {
    font-size: 14px;
    cursor: pointer;
    width: 90px;
    border-radius: 14px;
    text-align: center;
    height: 28px;
    line-height: 28px;
  }

  & /deep/ .renohome-right-nav-item.active {
    color: #fff;
    background-color: #2589ff;
  }

  & /deep/ .renohome-phone {
    *,
    :after,
    :before {
      box-sizing: border-box;
    }

    .line-hide,
    .two-line-hide {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .two-line-hide {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .line-hide {
      white-space: nowrap;
    }
  }

  & /deep/ .custorm--modelbox {
    .choose-goods {
      width: 100%;
      margin-bottom: 15px;

      .choods-item {
        width: 50px;
        height: 50px;
        margin-right: 5px;
        margin-bottom: 5px;
      }
    }

    .edit-form-item {
      padding: 20px 23px;
      font-size: 12px;
      background: #f8f8fa;
      border-radius: 6px;
      margin-bottom: 10px;
    }

    .edit-form-item:last-child {
      border-bottom: 0;
    }

    .el-radio__label {
      font-size: 12px;
    }

    .el-checkbox__label {
      font-size: 12px;
    }

    .form-label {
      line-height: 1;
      color: #47565d;
      font-weight: bolder;
      margin-bottom: 10px;
      font-size: 14px;
    }

    .form-label.mb-20 {
      margin-bottom: 20px;
    }

    .edit-form-item .inner {
      margin-top: 12px;
      white-space: nowrap;
    }

    .stylebox {
      padding: 10px 20px;
      color: #999;
      white-space: nowrap;
    }

    .ivu-color-picker .ivu-input {
      width: 56px;
      cursor: pointer;
      border-radius: 2px;
    }

    .ivu-input + span {
      box-sizing: border-box;
      line-height: 26px;
      width: 56px;
      height: 26px;
      margin-left: 10px;
      background: #f1f1f1;
      border-color: #dfdfdf;
      cursor: pointer;
      border-radius: 2px;
      border: 1px solid #dfdfdf;
      text-align: center;
    }

    .button-shape {
      margin-right: 20px;
      cursor: pointer;
    }

    .button-shape .opacity-0 {
      width: 0;
      height: 0;
      position: absolute;
    }

    .opacity-0 {
      opacity: 0;
    }

    .button-shape .opacity-0 {
      width: 0;
      height: 0;
      position: absolute;
    }

    .button-shape div.active {
      border-color: #409eff;
    }

    .button-shape div {
      width: 32px;
      height: 32px;
      background: #dfdfdf;
      border: 1px solid #dfdfdf;
    }

    .button-shape .button-shape-arc {
      border-radius: 4px;
    }

    .button-shape .button-shape-circle {
      border-radius: 16px;
    }

    .goodscol-add {
      border: 1px solid #6b7685;
      line-height: 32px;
      height: 32px;
      border-radius: 4px;
      text-align: center;
      cursor: pointer;
    }

    .el-color-picker--mini .el-color-picker__trigger {
      width: 56px;
    }

    .showcolor {
      width: 70px;
      text-align: center;
      line-height: 26px;
      height: 26px;
      background: #f1f1f1;
      color: #666;
      border-radius: 2px;
      border: 1px solid #dfdfdf;
      display: inline-block;
      margin-left: 10px;
    }

    .es-form-item {
      padding: 20px 23px;
      font-size: 12px;
      background: #f8f8fa;
      border-radius: 6px;
      margin-bottom: 10px;
      .uploadSource {
        background: #fff;
        cursor: pointer;
      }

      .uploadSource {
        width: 50px;
        height: 50px;
        line-height: 50px;
        margin-right: 0;
        border: 1px dashed #ededed;
        text-align: center;
        color: #dad9d9;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;
      }
    }

    .es-form-item:last-child {
      border-bottom: 0;
    }

    .es-form-item .item-inner {
      margin-top: 8px;
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;

      .color-picker span.ivu-input {
        width: 56px;
        line-height: 26px;
        height: 26px;
        background: #f1f1f1;
        color: #666;
        border-radius: 2px;
        border: 1px solid #dfdfdf;
        padding: 0;
        margin-left: 10px;
        display: inline-block;
      }
    }

    .es-form-item .item-inner:first-of-type {
      margin-top: 0;
    }

    .es-form-item .button-img {
      width: 32px;
      height: 32px;
      margin-right: 20px;
      cursor: pointer;
      border-radius: 4px;
      box-sizing: border-box;
      line-height: 36px;
      text-align: center;
      border: 1px solid transparent;
    }

    .es-form-item .button-img.block {
      width: 100%;
      position: relative;
      min-height: 32px;
      height: auto;
      text-align: left;
    }

    .es-form-item .button-img.active {
      border-color: #fb6638 !important;
    }

    .es-form-item [type="checkbox"],
    [type="radio"] {
      box-sizing: border-box;
      padding: 0;
    }

    .es-form-item .opacity-0 {
      opacity: 0;
    }

    .es-form-item .button-img .opacity-0 {
      width: 0;
      height: 0;
      position: absolute;
    }

    .es-form-item .alignC {
      text-align: center;
    }

    .es-form-item .item {
      background: #f6f7f9;
      padding: 10px 20px 10px 10px;
      border: 1px solid #eee;
      color: #999;
      position: relative;
      margin-bottom: 20px;
    }

    .es-form-item .labeltext {
      width: 40px;
      text-align: right;
      padding-right: 8px;
      white-space: nowrap;
      color: #666;
    }

    .es-form-item .item-inner .readonly-div {
      position: relative;
      flex-grow: 1;
    }

    .es-form-item .ivu-input-wrapper {
      display: inline-block;
      width: 100%;
      position: relative;
      vertical-align: middle;
      line-height: normal;
    }

    .es-form-item .ivu-input {
      display: inline-block;
      width: 100%;
      height: 32px;
      line-height: 1.5;
      padding: 4px 12px;
      font-size: 12px;
      border: 1px solid #ededed;
      border-radius: 4px;
      color: #333;
      background-color: #fff;
      background-image: none;
      position: relative;
      cursor: text;
      -webkit-transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
        -webkit-box-shadow 0.2s ease-in-out;
      transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;
    }

    .es-form-item .item-inner .readonly-div .readonly input {
      background: #e8effc;
      border: 0;
      padding-left: 18px;
      cursor: pointer;
      box-sizing: border-box;
    }

    .es-form-item .item-inner .readonly-div .readonly-icon {
      position: absolute;
      top: 5px;
      left: 12px;
    }

    .es-form-item .item .delete-child {
      position: absolute;
      right: -9px;
      top: -9px;
      cursor: pointer;
      font-size: 18px;
    }

    .coupon-showslider {
      width: 56px;
      height: 26px;
      background: #f6f7f9;
      border-color: #f1f1f1;
      color: #666;
      border-radius: 2px;
      line-height: 26px;
      text-align: center;
      margin-left: 20px;
    }

    .ivu-alert {
      position: relative;
      padding: 8px 16px;
      border-radius: 6px;
      color: #666;
      font-size: 12px;
      line-height: 22px;
      margin-bottom: 20px;
      border: 1px solid #d8e8fc;
      background-color: #e5f0fe;
    }

    .my-link-input .el-input__inner {
      border: none;
      height: 32px;
      background: #e8effc;
      cursor: pointer;
      border-radius: 5px;
    }

    .choose-item-lits {
      padding-top: 10px;
      flex-wrap: wrap;

      .choose-item-child {
        margin: 0 9px 10px 0;
        border-radius: 4px;
        border: 1px solid #ededed;
        width: 50px;
        height: 50px;
        line-height: 50px;
        position: relative;
        cursor: pointer;

        img.small {
          width: 48px;
          max-height: 100%;
          position: absolute;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
        }

        .delete {
          position: absolute;
          top: -6px;
          right: -6px;
          display: none;
          cursor: pointer;
        }

        &:hover {
          .delete {
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>
